<template>
  <view
    class="coupon-item"
    :class="[
      prop.expired ? 'grey' : 'pink',
      prop.pageType === 3 ? 'coupon-item1' : '',
      prop.couponType === 1 ? 'coupon-item2' : '',
    ]"
    @tap="tapSelect">
    <view class="c-left flex-column" :class="prop.expired ? 'grey1' : 'pink1'">
      <text class="text1">
        {{ getTitleLeft() }}
      </text>
      <text v-if="prop.couponType === 2" class="text2">
        满{{ getVal2(prop.items.qualifiedAmount) }}元可用
      </text>
    </view>
    <view class="c-right flex-column">
      <view class="item" :class="{ 'item-between': pageType == 3 }">
        <!-- <text class="text1 text-bold">电费折扣权益</text> -->
        <text class="text1 text-bold">{{ getTitleRight() }}</text>
        <!-- <text v-if="prop.couponType === 2" class="text1 text-bold">电费券</text> -->
        <text v-if="prop.couponType === 2" class="text2" :class="prop.expired ? 'grey2' : 'pink2'">
          {{ getType() }}
        </text>
      </view>
      <view v-if="prop.couponType === 2 && prop.pageType === 3" class="item1 time">
        生效时间：{{ prop.items.effectiveStartDate || '--' }}
      </view>
      <view v-if="prop.couponType === 2 && prop.pageType === 3" class="time">
        失效时间：{{ prop.items.effectiveEndDate || '--' }}
      </view>
      <view v-if="prop.couponType === 2 && prop.pageType !== 3" class="item1 time">
        有效期至：{{ prop.items.effectiveEndDate || '--' }}
      </view>
      <view v-if="prop.couponType === 2" class="time text-overflow">
        使用说明：{{ prop.items.introduce }}
      </view>
    </view>
    <view v-if="prop.pageType === 2" class="select-wrap">
      <view class="iconfont" :class="[selectInx ? 'icon-select1' : 'unselect']"></view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getVal1, getVal2 } from '@/utils/util';

interface Props {
  items: any;
  pageType?: number; // 1 待支付订单详情显示 2 待支付订单选择优惠券 3 优惠券列表
  couponType?: number; // 1 权益卡  2优惠券
  selectId?: any; // 选中项id
  expired?: boolean;
}
const prop = withDefaults(defineProps<Props>(), {
  items: {} as any,
  pageType: 1,
  couponType: 1,
  selectId: '',
  expired: false,
});

let selectInx = ref('');

const emit = defineEmits(['select-item']);

// #ifdef H5
selectInx.value = prop.selectId == prop.items?.id ? prop.selectId : '';
// #endif
watch(
  () => prop.selectId,
  (n_val, o_val) => {
    selectInx.value = prop.selectId == prop.items?.id ? prop.selectId : '';
  }
);

const tapSelect = () => {
  if (prop.pageType === 3) {
    selectInx.value = prop.items.id;
    emit('select-item', prop.items);
  } else {
    if (prop.items.id === selectInx.value) {
      selectInx.value = '';
      emit('select-item', '');
    } else {
      selectInx.value = prop.items.id;
      emit('select-item', prop.items);
    }
  }
};

const getTitleLeft = () => {
  if (prop.couponType === 1) {
    // 权益卡
    return `${getVal1(prop.items.discount / 10)}折` || '--';
  } else {
    // 优惠券
    return prop.items.couponType === 0
      ? `${getVal1(prop.items.discountRatio / 10)}折`
      : `${getVal2(prop.items.discountAmount)}元`;
  }
};

const getTitleRight = () => {
  if (prop.couponType === 1) {
    // 权益卡
    return prop.items.discountType === 1
      ? '服务费折扣权益'
      : prop.items.discountType === 2
      ? '电费折扣权益'
      : '总费用折扣权益';
  } else {
    // 优惠券
    return prop.items.discountType === 1
      ? '服务费券'
      : prop.items.discountType === 2
      ? '电费券'
      : '总费用券';
  }
};

const getType = () => {
  return prop.couponType === 1 ? '权益卡' : prop.items.couponType === 0 ? '折扣券' : '现金抵扣券';
};
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}
</style>
<style lang="scss">
.pink {
  background-color: #ffffff;
}
.grey {
  background-color: #e6e6e6;
}
.pink1 {
  background: linear-gradient(180deg, #caaa64 0%, #b18c46 50%);
}
.grey1 {
  background-color: #b5b5b5;
}
.pink2 {
  color: #b5914b;
  border: 1px solid #b5914b;
}
.grey2 {
  color: #858585;
  border: 1px solid #858585;
}
.pink1::after {
  background: -webkit-radial-gradient(circle, #ffffff, #ffffff 3px, rgba(255, 255, 255, 0) 4px);
  background: -moz-radial-gradient(circle, #ffffff, #ffffff 3px, rgba(255, 255, 255, 0) 4px);
  background: radial-gradient(circle, #ffffff, #ffffff 3px, rgba(255, 255, 255, 0) 4px);
}
.grey1::after {
  background: -webkit-radial-gradient(circle, #e6e6e6, #e6e6e6 3px, rgba(255, 255, 255, 0) 4px);
  background: -moz-radial-gradient(circle, #e6e6e6, #e6e6e6 3px, rgba(255, 255, 255, 0) 4px);
  background: radial-gradient(circle, #e6e6e6, #e6e6e6 3px, rgba(255, 255, 255, 0) 4px);
}
.coupon-item {
  position: relative;
  display: flex;
  width: 100%;
  height: 90px;
  // background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);

  &.coupon-item1 {
    // height: 110px;
    .c-right {
      margin: 4px 16px;

      .item1 {
        margin-top: 4px;
      }
    }
  }
  &.coupon-item2 {
    height: 70px;
  }

  .c-left {
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 94px;
    height: 100%;
    // background-color: #fa3939;
    // background-color: #b5b5b5;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    color: #fff;
    font-size: 20px;

    .text1 {
      line-height: 30px;
    }

    .text2 {
      line-height: 20px;
      font-size: 12px;
    }
  }
  .c-left::after {
    content: '';
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 89px;
    width: 10px;
    height: calc(100% - 14px);
    // background: -webkit-radial-gradient(circle, #FFFFFF, #FFFFFF 3px, rgba(255, 255, 255, 0) 4px);
    // background: -moz-radial-gradient(circle, #FFFFFF, #FFFFFF 3px, rgba(255, 255, 255, 0) 4px);
    // background: radial-gradient(circle, #FFFFFF, #FFFFFF 3px, rgba(255, 255, 255, 0) 4px);
    background-size: 10px 10px;
    border: 0;
  }

  .c-right {
    justify-content: center;
    width: calc(100% - 110px);
    margin: 12px 16px;
    font-size: 12px;

    .item {
      display: flex;
      align-items: center;
      width: 100%;

      &.item-between {
        justify-content: space-between;
      }

      .text1 {
        margin-right: 8px;
        line-height: 22px;
        color: #545454;
        font-size: 14px;
      }

      .text2 {
        display: flex;
        align-items: center;
        justify-content: center;
        // width: 60px;
        padding: 1px 12px;
        height: 18px;
        // color: #fa3939;
        // border: 1px solid #fa3939;
        // color: #858585;
        // border: 1px solid #858585;
        border-radius: 50px;
      }
    }

    .item1 {
      margin-top: 8px;
    }
    .time {
      width: calc(100vw - 172px);
      line-height: 18px;
    }
  }

  .select-wrap {
    display: flex;
    align-items: center;
    position: absolute;
    height: 100%;
    right: 8px;

    .icon-select1 {
      color: #b5914b;
      font-size: 20px;
    }
    .unselect {
      width: 20px;
      height: 20px;
      border: 1px solid #b5914b;
      border-radius: 50%;
      box-sizing: border-box;
    }
  }
}
</style>